<template lang="html">
	<div class="product_box">
		<div class="product_url">
			<router-link class="product_link" to="/productmain">
				<span>名品专区</span>
				<i>更多</i>
			</router-link>
		</div>
		<div class="product_main_box">
			<ul class="product_mian">
				<li class="product"  v-for="(item, index) in putonggoods">
					<router-link class="product_del" :to="{path:'/productmain',query:{id:item.id}}">
						<h2>￥{{item.price}}</h2>
						<img :src="item.thumb" :alt="item.title">
						<p>{{item.title}}</p>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
	  props:["putonggoods"],
	  data(){
	  	return{}
	  },
	  methods:{
	    
	  },
	  components:{

	  }
	}
</script>
<style type="text/css" lang="less">
	@import '../../../assets/less/index.less';
	.product_box{
		width: 100vw;
		border-bottom: solid 2vw @colcr4;
		.product_url{
			width: 100%;
			border-bottom: solid 1px @colcr4;
			.product_link{
				display: inline-block;
				width: @width;
				margin: 0 auto;
				height: 11vw;
				line-height: 11vw;
				font-size: @h1_font_size;
				span{
					display: inline-block;
					float: left;
				}
				i{
					float: right;
				}
			}
		}
		.product_main_box{
			width: 100vw;
			height: 52vw;
			background-image: url("../../../assets/img/banner/product_banner.jpg");
			background-size: 100vw 52vw;
			background-repeat: no-repeat;
			background-position: center;
		}
		.product_mian{
			width: @width;
			margin: 0 auto;
			.product{
				width: 50%;
				display: inline-block;
				.product_del{
					width: 100%;
					text-align: left;
					display: inline-block;
					height: 100%;
					h2{
						color: @color;
						font-size: @h1_font_size;
						font-weight: 700;
						margin-top: 6vw;
					}
					img{
						width: 34.666vw;
						height: 26.666vw;
					}
					p{
						width: 40vw;
						color: @color3;
						font-size: @h3_font_size; 
						margin-top: 3vw;
						.font_space(1);
						line-height: 4vw;
					}
				}
			}
		}
	}
</style>